{extend name="common/base" /}
{block name="body"} 
<style>
    .layui-form-label{
        width: 100px;
    }
</style>
<div class="Content" id="content">
    <div class="ContactPage  OrderInfo">
        <div class="title-tag">退款详情</div>
        <div class="order-container">
            <div class="order-info">
                <div>

                    <span>订单号：{$order.order_id}</span>
                    <!-- <span><i class="layui-icon layui-icon-print"></i>打印订单</span> -->
                </div>
                <div>
                    <span>支付方式：
                        {if $order.pay_type == 1}微信支付
                        {elseif $order.pay_type == 2}余额支付
                        {else /}其他
                        {/if}
                    </span>
                    <!-- <span>订单状态：{$order.status_name}</span> -->
                </div>

            </div>
            <h5>订单信息</h5>
            <div class="progress-steps">
                <div class="steps-wrapper">
                    <div class="step active">
                        <div class="step-circle">1</div>
                        <div class="step-text">提交订单<br>{$order.add_time}</div>
                    </div>
                    <div class="step active">
                        <div class="step-circle">2</div>
                        <div class="step-text">订单支付
                            {if $order.pay_time > 0}{$order.pay_time|date="Y-m-d H:i:s"}{/if}
                        </div>
                    </div>
                    <div class="step {if $order.status > 1} active {/if}">
                        <div class="step-circle">3</div>
                        <div class="step-text">商品已发货<br>
                            {if $order.deliver_time > 0}{$order.deliver_time}{/if}
                        </div>
                    </div>
                    <div class="step {if $order.status >= 4} active {/if}">
                        <div class="step-circle">4</div>
                        <div class="step-text">退货退款申请<br>
                        </div>
                    </div>
                    <div class="step {if $order.status >= 4} active {/if}">
                        <div class="step-circle">5</div>
                        <div class="step-text">商家处理</div>
                    </div>
                    <div class="step {if $order.status >= 4 && $order.refund_express} active {/if}">
                        <div class="step-circle">6</div>
                        <div class="step-text">商品寄回</div>
                    </div>
                    <!-- <div class="step">
                        <div class="step-circle">7</div>
                        <div class="step-text">确认商品</div>
                    </div> -->
                    <div class="step {if $order.status == 5} active {/if}">
                        <div class="step-circle">7</div>
                        <div class="step-text">退款</div>
                    </div>
                    <div class="step {if $order.status == 5 || $order.status == 6 || $order.status == 7} active {/if}">
                        <div class="step-circle">8</div>
                        <div class="step-text">完成</div>
                    </div>
                </div>
            </div>
            <!-- 收货 & 开票信息 -->
            <ul class="info-row">
                <li>
                    <div class="title">收货信息</div>

                    <dl>
                        <dd>收货人: {$order.real_name} </dd>
                        <dd> 收货电话: {$order.user_phone}</dd>
                        <dd> 收货地址: {$order.user_address}</dd>
                    </dl>

                </li>

                <li>
                    <div class="title">退回物流</div>

                    <dl>
                        <dd>退货单号：{$order.refund_express} </dd>
                        <dd> 退款金额：{order.refund_price} </dd>
    
                    </dl>

                </li>

                <!-- <li>
                    <div class="title">开票信息</div>

                    <dl>
                        <dd>发票类型：数电普票 </dd>
                        <dd> 发票拍头：深XXXXXXXXXXXXXXXXXXXXX</dd>
                        <dd> 纳税人识别号：91440300088583334H</dd>
                        <dd> 收票邮箱:13737732458@163.com</dd>
                    </dl>

                </li> -->
            </ul>

            <!-- 商品信息表格 -->
            <div class="section-title"><i></i>全部</div>
            <div class="table-view">
                <table class="goods-table layui-tab">
                    <thead>
                        <tr>
                            <th>商品信息</th>
                            <th>单价（元）</th>
                            <th>数量</th>
                            <th>小计（元）</th>
                            <!-- <th>状态</th> -->
                        </tr>
                    </thead>
                    <tbody>
                        {volist name="order.cartDetail" id="cart"} 
                                <tr>
                                    <td>
                                        <div class="shopName">

                                            <div class="img_100 img">
                                                <img src="{$cart.cart_info.thumb}">
                                            </div>
                                            <div class="text">
                                                <b> {$cart.cart_info.productInfo.store_name} {$cart.cart_info.productInfo.attrInfo.suk}</b>
                                                <br> <br>
                                            </div>
                                        </div>

                                    </td>
                                    <td>¥{$cart.cart_info.productInfo.price}</td>
                                    <td>{$cart.cart_info.cart_num}</td>
                                    <td>

                                        <b class="ftc">¥{$cart.cart_info.productInfo.price } * {$cart.cart_info.cart_num}</b>
                                    </td>
                                    <!-- <td>
                                        <b class="ftc">{$order.status_name}</b>
                                    </td> -->
                                </tr>
                            {/volist}
                    </tbody>
                </table>
            </div>
            <div class=" amount-summary">
                <div class="item">
                    <span class="label">商品总件数：</span>
                    <span class="num" style="color: #ff4d4f;">{$order.total_num}件</span>
                </div>
            </div>
            <div class="amount-summary grid-row">
                <div class="md4 xs12">
                    <p>运费：<strong>¥{$order.freight_price}</strong></p>
                </div>
                <div class="md4 xs12">
                    <p>优惠：<strong>¥{$order.deduction_price}</strong></p>
                </div>

                <div class="item md4 xs12">
                    <span class="label">商品应付总额：</span>
                    <strong class="num">¥{$order.pay_price}</strong>
                </div>

            </div>

            <!-- 物流信息 -->
            <div class="section-title"><i></i>物流信息</div>
            <div class="logistics-info">
                <ul class="logistics-list">
                    <div class="logistics-item">
                        <span>物流公司：</span>{$order.delivery_name}
                    </div>
                    <div class="logistics-item">
                        <span>运单号：</span>{$order.delivery_id}
                    </div>
                    <div class="logistics-item">
                        <span>发货时间：</span>{$order.deliver_time}
                    </div>
                </ul>


                <div class="logistics-timeline">
                    <div class="timeline-item">
                        <div class="timeline-date">2024-05-10</div>
                        <div class="timeline-time">04:25:47</div>
                        <div class="timeline-content">[深圳市]<span style="color: #29A370;"> [深圳市]快件已发往
                                [安徽合肥转运中心]</span></div>
                    </div>
                    <div class="timeline-item">
                        <div class="timeline-date"></div>
                        <div class="timeline-time">04:25:16</div>
                        <div class="timeline-content">[深圳市] [深圳市]快件已到达 [广东深圳转运中心]</div>
                    </div>
                    <div class="timeline-item">
                        <div class="timeline-date"></div>
                        <div class="timeline-time">03:39:55</div>
                        <div class="timeline-content">[深圳市] [深圳市]快件已发往 [广东深圳转运中心]</div>
                    </div>

                    <div class="timeline-item">
                    </div>
                    <div class="timeline-item">
                        <div class="timeline-date">2024-05-10</div>
                        <div class="timeline-time">22:06:59</div>
                        <div class="timeline-content">[东莞市] [东莞市] [广东东莞莞长安镇公司] (0769-23883755)的长营业部徐除名已收件
                        </div>
                    </div>
                </div>

                <div class="notice">
                    以上信息由物流公司提供，如无跟踪信息或有疑问，请咨询平台
                </div>

                <!-- <div class="action-foot-btns">
                    <button class="layui-btn">物流异常处理</button>
                    <button class="layui-btn">填写物流信息</button>
                </div> -->
            </div>

            <div class="section-title"><i></i> 退款理由</div>
            <div class="back-info">
                <b style="color: #FF0F0F;">{$order.refund_reason_wap}
                </b>

                <p>{$order.refund_reason_wap_explain}</p>
                <div style="margin-top: 20px;">
                    {if $order.refund_reason_wap_img}
                        {php}
                            // 将逗号分隔的图片字符串转为数组
                            $refundImages = explode(',', $order.refund_reason_wap_img);
                        {/php}
                        
                        {volist name="refundImages" id="img"} 
                            {if $img}
                            <div class="img-box" style="display: inline-block; margin-right: 10px;">
                                <img src="{$img|trim}" alt="退款理由图片" style="width: 100px; height: 100px; object-fit: cover;">
                            </div>
                            {/if}
                        {/volist}
                    {/if}
                </div>
            </div>


            <!-- 订单操作 -->
            <div class="section-title"><i></i> 订单管理</div>
            <div class="action-btns" style="border-top: 1px solid #ebeef5;">
                <button class="layui-btn"  id="addRemarkBtn">订单备注</button>
                {if $order.paid == 1}
                        <button class="layui-btn" id="refundBtn">退款</button>
                {/if}
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="refundTpl">
    <form class="layui-form" lay-filter="refundForm" style="padding: 20px;">
        <div class="layui-form-item">
            <label class="layui-form-label">退款金额</label>
            <div class="layui-input-block">
                <input type="number" name="refund_amount" lay-verify="required|number" 
                       value="{$order.pay_price}" placeholder="请输入退款金额" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">退款原因</label>
            <div class="layui-input-block">
                <textarea name="refund_reason" lay-verify="required" placeholder="请输入退款原因" class="layui-textarea"></textarea>
            </div>
        </div>
    </form>
</script>

<!-- 订单备注弹窗模板 -->
<script type="text/html" id="remarkTpl">
    <form class="layui-form" lay-filter="remarkForm" style="padding: 20px;">
        <div class="layui-form-item">
            <label class="layui-form-label">订单备注</label>
            <div class="layui-input-block">
                <textarea name="remark" placeholder="请输入订单备注内容" class="layui-textarea">{$order.remark|default=''}</textarea>
            </div>
        </div>
    </form>
</script>
{/block}

{block name="js"} 
<script>
    changeTitleName('订单退款');
    
    layui.use(['form', 'layer'], function(){
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.$;

        // 退款操作
        $('#refundBtn').on('click', function(){
            layer.open({
                type: 1,
                title: '订单退款',
                content: $('#refundTpl').html(),
                area: ['500px', '300px'],
                btn: ['确认退款', '取消'],
                success: function(layero, index){
                    form.render();
                },
                yes: function(index, layero){
                    var refund_amount = layero.find('input[name="refund_amount"]').val();
                    var refund_reason = layero.find('textarea[name="refund_reason"]').val().trim();
                    
                    if(!refund_amount){
                        layer.msg('请输入退款金额');
                        return false;
                    }
                    if(!refund_reason){
                        layer.msg('请输入退款原因');
                        return false;
                    }

                    // 提交退款请求
                    $.post('/merchant/merchant-order-refund', {
                        order_id: '{$order.order_id}',
                        refund_amount: refund_amount,
                        refund_reason: refund_reason
                    }, function(res){
                        if(res.code === 200){
                            layer.msg('退款申请已提交', {icon: 1});
                            setTimeout(function(){
                                location.reload();
                            }, 1000);
                        }else{
                            layer.msg(res.msg || '退款失败', {icon: 2});
                        }
                    });
                }
            });
        });

        // 订单备注
        $('#addRemarkBtn').on('click', function(){
            layer.open({
                type: 1,
                title: '订单备注',
                content: $('#remarkTpl').html(),
                area: ['500px', '250px'],
                btn: ['保存备注', '取消'],
                success: function(layero, index){
                    form.render();
                },
                success: function(layero, index){
                    form.render();
                },
                yes: function(index, layero){
                    var remark = layero.find('textarea[name="remark"]').val().trim();
                    
                    // 提交备注请求
                    $.post('/merchant/merchant-order-remark', {
                        order_id: '{$order.order_id}',
                        remark: remark
                    }, function(res){
                        if(res.code === 200){
                            layer.msg('备注已保存', {icon: 1});
                            layer.close(index);
                        }else{
                            layer.msg(res.msg || '保存失败', {icon: 2});
                        }
                    });
                }
            });
        });
    });
</script>
{/block}